<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@include file="/resource/common/taglib.jspf" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="description" content="User login page"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <%@include file="/resource/common/login.jspf" %>
    <%@include file="/resource/common/layer.jspf" %>
    <link rel="icon" href="resource/images/ico.ico" type="image/x-icon"/>
    <!-- text fonts -->
    <style type="text/css">
        .bound {
            background-color: white;
            background-color: rgba(255, 255, 255, 0.95);
            border-radius: 40px;
        }
    </style>
    <title>${SESSION_COMPANY}|管理后台</title>
    <script>
        if (window.top !== window.self) {
            window.top.location = window.location;
        }
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#loginForm").validate({
                rules: {
                    validateCode: {
                        remote: "${pageContext.request.contextPath}/servlet/validateCodeServlet"
                    }
                },
                messages: {
                    username: {
                        required: "请填写用户名."
                    },
                    password: {
                        required: "请填写密码."
                    },
                    validateCode: {
                        remote: "验证码不正确.",
                        required: "请填写验证码."
                    }
                },
                errorLabelContainer: "#messageBox",
                errorPlacement: function (error, element) {
                    error.appendTo($("#loginError").parent());
                }
            });
        });
        // 如果在框架或在对话框中，则弹出提示并跳转到首页
        if (self.frameElement && self.frameElement.tagName == "IFRAME" || $('#left').length > 0 || $('.jbox').length > 0) {
            layer.alert('未登录或登录超时。请重新登录，谢谢', {
                skin: 'layui-layer-lan',
                closeBtn: 0,
                anim: 4,
                icon: 5
            });
            top.location = "${ctx}";
        }
    </script>
</head>
<body class="login-layout light-login">
<div class="main-container">
    <div class="main-content">
        <div class="row">
            <div class="col-sm-10 col-sm-offset-1">
                <div class="login-container">
                    <div class="center">
                        <h1>
                            <br/> <img src="${pageContext.request.contextPath}/resource/images/logo.png"> <br>
                        </h1>
                        <sys:message content="${message}"/>
                    </div>
                    <div class="space-6"></div>
                    <div class="position-relative">
                        <div id="login-box" class="login-box visible widget-box no-border bound">
                            <div class="widget-body bound">
                                <div class="widget-main bound">
                                    <h4 class="header blue lighter bigger">
                                        <i class="ace-icon fa fa-coffee green"></i> 用户登录
                                    </h4>
                                    <div class="space-6"></div>
                                    <form id="loginForm" class="form-signin" action="${ctx }/login.do" method="post">
                                        <fieldset>
                                            <label class="block clearfix">
													<span class="block input-icon input-icon-right"> 
														<input type="text" id="username" name="username"
                                                               class="form-control required" value="${username}"
                                                               placeholder="用户名"/> <i class="ace-icon fa fa-user"></i>
													</span>
                                            </label>
                                            <label class="block clearfix">
													<span class="block input-icon input-icon-right"> 
														<input type="password" id="password" name="password"
                                                               class="form-control required" placeholder="密码"/> <i
                                                            class="ace-icon fa fa-lock"></i>
													</span>
                                            </label>
                                            <div class="space"></div>
                                            <div class="clearfix">
                                                <label class="inline">
                                                    <input type="checkbox" id="rememberMe"
                                                           name="rememberMe" ${rememberMe ? 'checked' : ''}
                                                           class="ace"/> <span class="lbl"> 记住我</span>
                                                </label>
                                                <button type="submit"
                                                        class="width-35 pull-right btn btn-sm btn-primary">
                                                    <i class="ace-icon fa fa-key"></i> <span
                                                        class="bigger-110">登录</span>
                                                </button>
                                            </div>
                                            <div class="space-4"></div>
                                            <div id="themeSwitch" class="dropdown">
                                                <ul class="dropdown-menu">
                                                </ul>
                                                <!--[if lte IE 6]>
                                                <script type="text/javascript">$('#themeSwitch').hide();</script>
                                                <![endif]-->
                                            </div>
                                        </fieldset>
                                    </form>
                                    <br/> <br/>
                                    <div class="form-options clearfix"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="center">
                        <h4 id="id-company-text">
                            <font color="#A90E0E">&copy; </font>
                        </h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /.main-container -->
<!-- basic scripts -->
<!--[if !IE]> -->
<script type="text/javascript">
    window.jQuery || document.write("<script src='../assets/js/jquery.js'>" + "<" + "/script>");
</script>
<style>
    /* Validation */
    label.error {
        color: #cc5965;
        display: inline-block;
        margin-left: 5px;
    }

    .form-control.error {
        border: 1px dotted #cc5965;
    }
</style>
<!-- inline scripts related to this page -->
<script type="text/javascript">
    $(document).ready(function () {
        $(document).on(
            'click',
            '.form-options a[data-target]',
            function (e) {
                e.preventDefault();
                var target = $(this).data('target');
                $('.widget-box.visible').removeClass('visible');//hide others
                $(target).addClass('visible');//show target
            });
    });
</script>
</body>
</html>
